<template>
  <div class="company-info">
    <h1>公司信息</h1>
    <form @submit.prevent="saveCompanyInfo">
      <div class="form-group">
        <label for="companyName">公司名称</label>
        <input type="text" id="companyName" v-model="companyName" required class="form-control" />
      </div>

      <div class="form-group">
        <label for="companyAddress">公司地址</label>
        <input type="text" id="companyAddress" v-model="companyAddress" required class="form-control" />
      </div>
      <div class="form-group">
        <label for="logoUpload">LOGO</label>
        <input type="file" id="logoUpload" @change="onFileChange" class="form-control" />
      </div>
      <div v-if="logo" class="logo-preview">
        <h4>LOGO预览:</h4>
        <img :src="logo" alt="公司LOGO" width="300" height="300" />
      </div>

      <button type="submit" class="submit-button">保存</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      companyName: '',
      companyAddress: '',
      logo: null,

    };
  },
  methods: {
    onFileChange(event) {
      const file = event.target.files[0];
      if (file && file.type.startsWith('image/')) {
        this.logo = URL.createObjectURL(file);
      } else {
        alert('请上传有效的图片文件');
      }
    },
    saveCompanyInfo() {
      alert('公司信息已保存！');
    },
  },
};
</script>

<style scoped>
.company-info {
  max-width: 534px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-top: 50px ;
  background-color: #ffffff;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.form-control:focus {
  border-color: blue;
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}
.logo-preview {
  margin-top: 20px;
  text-align: center;
}
.submit-button {
  width: 100%;
  padding: 10px;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
</style>